import React, { Component } from "react";
// ant
import { Modal, message } from "antd";
// API
// import { getTaskDataById, updateTaskData, addTaskData } from "@/api/raycloud";
// 组件
import FormCom from "@c/form/Index";
import http from '../../../utils/request';


class TaskModal extends Component {
    constructor(props){
        super(props);
        this.state = {
            isModalVisible: false,
            task_id: "",
            // 提交接口 从接口动态获取
            url: "",
            formConfig: {
                editKey: "",
                // 初始值
                initValue: {},
                setFieldValue: {},
                formatFormKey: "id"
            },
            // 格式
            formLayout: {
                labelCol: { span: 6 },
                wrapperCol: { span: 16 }
            },
            // 表单 从接口动态获取
            formItem: []
        };
    }

    componentDidMount(){
        this.props.onRef(this);
    }

    onFormRef = (ref) => {
        this.child = ref;
    }

    // 关闭弹窗
    handleCancel = () => {
        // 清单表单
        this.child.onReset();
        this.setState({
            isModalVisible: false,  // 关闭弹窗
            formConfig: { setFieldValue: "" },  // 清除form的初始数据
        })
    }
    
    /** 弹窗 获取数据渲染表单*/
    visibleModal = (params) => {
        console.log(params)
        const form_item = params.rowData.params.formItem;
        this.setState({
            isModalVisible: params.status,
            task_id: params.rowData.id,
            url: params.rowData.execute,
            formItem: form_item
        }, () => {
            // this.getDetailed();
        })
    }

    onBlurEvent = (e) => {
        const value = e.currentTarget.value;
        if(value) {
            this.updateItem(value ? false : true);
            return false;
        }
    }
    // 提交按钮
    submit = (value) => {
        console.log(value, this.state)
        http.request({
            url: this.state.url,
            method: 'post',
            data: value
        }).then(response => {
            console.log('==>接收到值 ', response)
            message.success('提交成功')
            this.handleCancel();
            // const data = response.data.data_account;
            // this.setState({ 
            //     dataEx: data
            // });
        })
    }

    render(){
        return (
            <Modal title="详情" visible={this.state.isModalVisible} footer={null} onCancel={this.handleCancel}>
                <FormCom 
                    onRef={this.onFormRef} 
                    onBlur={this.onBlurEvent} 
                    formItem={this.state.formItem} 
                    formLayout={this.state.formLayout} 
                    formConfig={this.state.formConfig}
                    submit={this.submit}
                />
            </Modal>
        )
    }
}

export default TaskModal;